<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>debunce</title>
</head>
<body>
    
    <div style="height: 2000px">
        <p id="num">0</p>

        <button id="btn">click and add</button>

        <input type="text" id="ipt">
    </div>

    <script>
    
        {
            let btn = document.getElementById('btn');
            let num = document.getElementById('num');
            let ipt = document.getElementById('ipt');

            /* btn.onclick = function () {
                num.innerHTML ++; 
            } */

            function debunce (fn,timeout) {
                let timer = null;
                return function () {
                    clearTimeout(timer);
                    timer = setTimeout(() => {
                        fn();
                    }, timeout);
                }
            }

            function fn () {
                console.log('1');
            }

            ipt.onchange = debunce (fn,1000);

            

        }       
        
        
        {

            function throttle (fn,interval,timeout) {
                let previous = null;
                let timer = null;

                return function () {

                    let now = new Date();

                    if (!previous) previous = now;

                    if (now - previous > interval) {
                        clearTimeout(timer);
                        fn();
                        previous = now;
                    } else {
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                            fn();
                        }, timeout);
                    }

                }

            }


            function gn () {
                console.log('scroll');
            }

            window.onmousemove = throttle(gn,500,1000);
        }

    </script>

</body>
</html>